<script>
import { getAllOrders, getAllMyOrders } from "../apis/api";
export default {
  data() {
    return {
      buyorders: [],
      sellorders: [],
      myorders: []
    }
  },
  mounted() {
   
    this.getAllMyOrders()
    this.getAllOrders();
  },
  methods: {
    getAllOrders() {
      getAllOrders().then(res => {
        console.log(res)
        var orders = res.data.data;
       
        for (var i = 0; i < orders.length; i++) {
          // console.log(orders[i].orderType)
          if (orders[i].buyId != undefined && this.buyorders.length < 8) {
            this.buyorders.push(orders[i])
          } else if(this.sellorders.length < 8){
            this.sellorders.push(orders[i])
          }
        }
        
        // console.log(res.data.data)
      })
    },
    getAllMyOrders() {
      getAllMyOrders().then(res => {
        console.log(res)
        this.myorders = res.data.data
        
      })
    }
  }
}

</script>

<template>
  <div class="footer_coin">
    <div class="header">
      <table class="tab01">
        <tr>
          <td class="td1">现货</td>
          <td class="td2">杠杆</td>
          <td class="td3">法币</td>
          <td style="width: 50%;text-align: right"><img src="../assets/coin/openButton.png" /></td>
        </tr>
      </table>
      <table class="tab02">
        <tr>
          <td width="5%"><img src="../assets/coin/more.png" /></td>
          <td width="20%">BTC/USDT</td>
          <td width="5%"><span>+0.74%</span></td>
          <td width="40%" style="text-align: right"><img src="../assets/coin/candleline.png" /></td>
          <td><img src="../assets/coin/more02.png" /></td>
        </tr>
      </table>
    </div>
    <div class="mid">
      <!-- 输入框-->
      <div class="mid_topp">
        K线图
      </div>
      <!-- 四个板块-->
      <div class="mid_block" id="mid_first">
        <div class="mid_first_01">
          <div id="sp1" @click="buy(BuyOrSellButton)">买入</div>
          <div id="sp2" @click="sell(BuyOrSellButton)">卖出</div>
        </div>
        <div class="mid_first_02">
          <select>
            <option value="1">限价委托</option>
          </select>
          <div class="div_input02">
            委托单价
          </div>
          <div class="div_but01">
            <button><img src="../assets/coin/jianhao.png" /></button>
            <button><img src="../assets/coin/jiahao.png" /></button><br />
          </div>
          <span style="color: slategrey;font-size: xx-small">=193530.4CNY</span>

          <div class="div_input02">委托数量(BTC)</div>
          <div class="div_but01">
            <button><img src="../assets/coin/jianhao.png" /></button>
            <button><img src="../assets/coin/jiahao.png" /></button>
          </div>
          <div style="margin-top: 5px">
            <!-- <meter style="width: 100%" max="100" value="70">70%</meter> -->
            <img class="pic4" src="../assets/contract/05.png">
          </div>
          <table>
            <tr>
              <td width="50%">可用</td>
              <td style="text-align: right">0.211496USTD</td>
            </tr>
            <tr>
              <td>已有</td>
              <td style="text-align: right">0.000000BTC</td>
            </tr>
          </table>
          <div class="div_input02">交易额</div>
          <span>=0.00CNY</span><br />
          <select style="background: transparent;width: 50%;outline: none;margin-top: 10px">
            <option>高级选项</option>
            <option>其他</option>
          </select><br />
          <button class="buy_button">现货买入</button>
          <table>
            <tr>
              <td width="50%">锁定</td>
              <td style="text-align: right">0.000000USDT</td>
            </tr>
          </table>
        </div>

      </div>
      <div class="mid_block" id="mid_second">
        <div class="mid_second_01">
          <table class="mid_second_01_tab01">
            <tr>
              <td style="text-align: left">价格</td>
              <td style="text-align: right">累计</td>
              <td><img width="15px" height="15px" src="../assets/coin/update.png" /></td>
            </tr>
          </table>
          <div class="green">
            <table class="mid_second_01_tab02" style="color: slategray;">
              <tr v-for="(item, index) in buyorders" :key="index">
                <td width="10%">{{ index+1 }}</td>
                <td width="40%">{{ item.price }}</td>
                <td width="50%" style="text-align: right">{{ item.quantity }}</td>
              </tr>
            </table>
          </div>
          <div class="red">
            <table class="mid_second_01_tab02" style="color: red">
              <tr v-for="(item, index) in sellorders" :key="index">
                <td width="10%">{{ index+1 }}</td>
                <td width="40%">{{ item.price }}</td>
                <td width="50%" style="text-align: right">{{ item.quantity }}</td>
              </tr>
            </table>
          </div>
          <div class="mid_second_01_select">
            <select>
              <option>0.1</option>
            </select>
          </div>
          <div style="text-align: left; color: slategrey;  font-size: smaller;margin-top: 3px">
            <span>多空形式</span>
          </div>
          <div class="xingshi"></div>
        </div>
      </div>
    </div>
    <div class="bottomTable">
      <div class="footer_01">
        <table>
          <tr class="tr01">
            <td style="color: black">当前委托</td>
            <td>最新成交</td>
            <td>行情图表</td>
            <td>数据分析</td>
            <td style="text-align: right;width: 20%"><img width="15px" height="15px" src="../assets/coin/history.png" />
            </td>
          </tr>
          <tr class="tr02">
            <td colspan="2">
              <select>
                <option>普通委托</option>
              </select>
            </td>
            <td colspan="2">仅当前市场</td>
            <td width="25%"><input type="button" value="全部撤销" /></td>
          </tr>
          <tr class="tr03">
            <td colspan="2" style="font-size: xx-small">价格<img width="10px" height="10px"
                src="../assets/coin/sorting.png" /></td>
            <td colspan="3" style="font-size: xx-small;">时间<img width="10px" height="10px"
                src="../assets/coin/sorting.png" /></td>
            <td style="font-size: xx-small;text-align: right">成交量<img width="10px" height="10px"
                src="../assets/coin/sorting.png" /></td>
          </tr>
          <tr class="tr03" v-for="(item, index) in myorders" :key="index">
            <td colspan="2" style="font-size: xx-small">{{ item.price }}</td>
            <td colspan="3" style="font-size: xx-small">{{ item.createTime }}</td>
            <td colspan="2" style="font-size: xx-small;">{{ item.quantity }}</td>
          </tr>

        </table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.footer_coin {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 490px;
  margin-left: 10px;
}

.header {
  width: 480px;
}

.header table {
  margin: auto;
  text-align: center;
}

.header .tab01 {
  width: 480px;
}

.header .tab01 .td1 {}

.header .tab01 .td2 {
  color: slategrey;
  font-size: small;
}

.header .tab01 .td3 {
  color: slategrey;
  font-size: small;
}

.header img {
  width: 20px;
  height: 20px;
}

.header .tab02 {
  width: 480px;
}

.header .tab02 span {
  background-color: indianred;
  opacity: 0.4;
  color: darkred;
  font-size: small;
}

/** 中间部分*/

.mid {
  width: 500px;
  box-shadow: 0px 10px 0px 0px #F6F6F6;

}

/**中间输入框*/
.mid_topp {
  margin-top: 8px;
  font-size: 14px;
  color: slategrey;
  border-radius: 10px;
  padding: 3px 3px 3px 10px;
  background-color: #f7f7f7;
}

.div_input02 {
  margin-top: 5px;
  font-size: 14px;
  color: slategrey;
  padding: 3px 0px 3px 10px;
  background-color: #f7f7f7;
  width: 93%;
}

.mid_topp input {
  width: 96%;
  height: 20px;
  background-color: #F7F7F7;
  border-radius: 5px;
  border: #F8F9FB;
}

/** 中间2个涨跌模块*/
.mid .mid_block {
  width: 50%;
  margin-top: 10px;

}

#mid_first {
  float: left;
}

.mid_block .mid_first_01 {
  text-align: center;
}

.mid_block .mid_first_01 div {
  width: 50%;
  height: 26px;
  text-align: center;
  line-height: 26px;
  border-radius: 2px;
  color: slategrey;
  font-size: small;
  box-shadow: 0px 0px 0px 0.5px;

}

.mid_block .mid_first_01 #sp1 {
  display: inline-block;
  background-color: #E93C3E;
  color: #F9FAFC;

}

.mid_block .mid_first_01 #sp2 {
  display: inline-block;
}

.mid_block .mid_first_02 select {
  width: 98%;
}

.mid_block .mid_first_02 input {
  margin-top: 10px;
  width: 95%;
}

.mid_block .mid_first_02 .div_but01 button {
  margin-left: 8px;
  border: 0;
  outline: none;
  background-color: transparent;
}

.mid_block .mid_first_02 img {
  width: 10px;
  height: 10px;

}

.mid_block .mid_first_02 .input02 {
  height: 25px;
  background-color: #F7F7F7;
  border: 0;
  border-radius: 2px;

}

.mid_block .mid_first_02 .div_but01 {
  margin-top: -24px;
  margin-left: 192px;
  border: none;
  outline: none;
}

.mid_block .mid_first_02 table {
  margin-top: 10px;
}

.mid_block .mid_first_02 td {
  font-size: x-small;
}

.mid_block .mid_first_02 span {
  color: slategrey;
  font-size: xx-small;
}

.buy_button {
  margin-top: 20px;
  background-color: #E93C3E;
  opacity: 0.8;
  border-radius: 2px;
  text-align: center;
  width: 98%;
  height: 25px;
  color: #F9FAFC;
  border: 0;
}

/** 第二个模块*/
#mid_second {
  text-align: center;
  float: left;
}

.mid_second_01 table {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
}

.mid_second_01_tab01 td {
  width: 50%;
  font-size: xx-small;
}

.mid_second_01_tab02 {
  font-size: xx-small;
  color: cyan;
}

.green {
  background-color: #ECF8F8;
  height: 150px;
}

.red {
  background-color: #FEECEA;
  height: 150px;
}

.mid_second_01_select {
  display: inline-block;
  width: 100%;
  height: 30px;
  text-align: left;
  margin-top: 10px;
}

.mid_second_01_select select {
  padding-bottom: -10px;
  width: 70%;
  height: 20px;
  background-color: #F7F7F7;
  border: 0;
  border-radius: 10px;
}

.bottomTable {
  width: 100%;
  height: 300px;
  margin-top: 20px;
}

.footer_01 table {
  width: 100%
}

.footer_01 td {
  color: lightslategray;
  font-size: small;
}

.footer_01 .tr02 {
  height: 30px;
  text-align: center;
}

.footer_01 .tr02 select {
  width: 90%;
  height: 20px;
  border: 0;
  border-radius: 5px;
  background-color: #F7F7F7;
  font-size: x-small;
}

.footer_01 .tr03 {
  height: 30px;
  margin-top: 10px;
}

.xingshi {
  width: 170px;
  height: 30px;
  background-color: #FEECEA;
  float: right;
  margin-right: 70px;
  margin-bottom: 15px;
  border-radius: 20px;
  color: #B45D66
}

.pic4 {
  width: 200px;
  height: 18px;
  margin-left: 8px;
  margin-top: 8px;
}
</style>
